<html>
  <head>
    <title>页面内容构成</title>
  </head>
  <body>
    <script>
       /*
                  三、页面内容构成

                          uni-app页面基于vue 规范。一个页面内，有3个根节点标签：

                             1、模板组件区：  <template>

                             2、脚本区：      <script>

                             3、样式区：      <style>

                              eg:

                                    <template>  // 模板区
                                        <view class="content">
                                          <button @click="buttonClick">{{title}}</button>
                                        </view>
                                    </template>

                                    <、script>   // 脚本区
                                          export default {
                                            data() {
                                              return {
                                                title: "Hello world", // 定义绑定在页面上的data数据
                                              }
                                            },
                                            onLoad() {
                                              // 页面启动的生命周期，这里编写页面加载时的逻辑
                                            },
                                            methods: {
                                              buttonClick: function () {
                                                console.log("按钮被点了")
                                              },
                                            }
                                          }
                                    <//script>

                                    <style>  // 样式区
                                      .content {
                                        width: 750rpx;
                                        background-color: white;
                                      }
                                    </style>


                          1、template模板区

                                    template中文名称为 "模板"，它类似html的标签。但是有两个区别：

                                      ①、html中  script 和 style 是HTML的二级节点。但在vue中 tempalte、script、style这3个是平级关系。

                                      ②、html中写的是web标签，但 vue的template中写的全都是 vue组件，每个组件支持属性、事件、vue指令，还可以绑定vue的data数据。

                                    在vue2中， template 的二级节点只能有一个节点，一般是在一个根 view下继续写页面组件(如上示例代码)。
                                    
                                    但在vue3中，template可以有多个二级节点，省去一个层级，如下：

                                                <template>
                                                        <view>
                                                          <text>标题</text>
                                                        </view>
                                                        <scroll-view>

                                                        </scroll-view>
                                                </template>   
                                    
                                    可以在 mainfest 中切换使用 vue2 还是 vue3
                                    
                                    注意：  uni-app x 中支Vue3


                          2、script 脚本区

                                     script 中编写脚本，可以通过lang 属性指定脚本语言。

                                          ①、在vue和nvue中，默认是 js ，可以指定 ts.

                                          ②、在 uvue 中，仅支持uts，不管script 的 lang属性写成什么，都按 uts编译。

                                          < lang="ts">

                                          <//script>

                                      在 vue 的选项式（option）规范中，script下包含 export default{}.

                                      除了选项式，还有组合式写法。

                                      页面级的代码大多写在  export default{}中。写在里面的代码，会随着页面关闭而关闭。


                                     ★、 "export default"外的代码

                                      写在 export default {}外面的代码，一般有几种情况：

                                            1、引入第三方 js/ts模块

                                            2、引入非 easycom 的组件  (一般组件推荐使用easycom，无需导入注册)

                                            3、在 ts/uts 中，对 data 进行类型定义

                                            4、定义作用域更大的变量

                                      eg：

                                            <、script lang="ts">
                                                  const TAB_OFFSET = 1; // 外层静态变量不会跟随页面关闭而回收
                                                  import charts from 'charts.ts'; // 导入外部js/ts模块
                                                  import swiperPage from 'swiper-page.vue'; //导入非easycom的组件
                                                  type GroupType = {
                                                    id : number,
                                                    title : string
                                                  } // 在ts中，为下面data数据的 groupList 定义类型
                                                  export default {  // 文件默认导出
                                                      components: {
                                                          swiperPage
                                                      },          // 注册非easycom组件
                                                      data() {
                                                        return {
                                                          groupList: [
                                                            { id: 1, title: "第一组" },
                                                            { id: 2, title: "第二组" },
                                                          ] as GroupType[], // 为数据groupList定义ts类型
                                                        }
                                                      },
                                                      onLoad() {},
                                                      methods: {}
                                                  }
                                            </、script>


                                      开发者应谨慎编写 export default {} 外面的代码，这里的代码有2个注意事项：

                                              1、影响应用性能。这部分代码在应用启动时执行，而不是页面加载。如果这里的代码写的太复杂，会影响应用启动速度，占用更多内存。

                                              2、不跟随组件、页面关闭而回收。

                                                      在外层的静态变量不会跟随页面关闭而回收。如果必要你需要手动处理。

                                                      比如 beforeDestroy 或 destroyed 生命周期进行处理。


                                    ★、 export default 里的代码

                                                export default {} 里的内容，是页面的主要逻辑代码。包括几部分：

                                                      ①、data：template模板中需要使用的数据。具体 另见

                                                      ②、页面生命周期：如页面加载、隐藏、关闭，具体 见下

                                                      ③、methods方法，如按钮点击、屏幕滚动


                                                eg:
                                                      <template>
                                                        <view>
                                                          <button @click="buttonClick">{{title}}</button>
                                                        </view>
                                                      </template>

                                                      <script>
                                                          export default {
                                                            data() {
                                                              return {
                                                                title: "点我", // 定义绑定在页面上的data数据
                                                                // 多个data在这里继续定义。逗号分隔
                                                              }
                                                            },
                                                            onLoad() {
                                                              // 页面启动的生命周期，这里编写页面加载时的逻辑
                                                            },
                                                            // 多个页面生命周期监听，在这里继续写。逗号分隔
                                                            methods: {
                                                              buttonClick: function () {
                                                                this.title = "被点了"
                                                              },
                                                              // 多个方法，在这里继续写。逗号分隔
                                                            }
                                                          }
                                                      </\script>

                         3、style 样式区

                                    style 的写法与 web 的 css 基本相同。
                                    
                                    如果页面时nvue 或 uvue ,使用原生渲染而不是webview渲染，那么它们支持的css是有限的

                                    详见 css文档：  
            */
    </script>
  </body>
</html>